<template>
  <div>
    <div class="flex justify-between items-center">
      <span class="text-14px">面包屑</span>
      <ElSwitch v-model="breadcrumb" @change="settingStore.setGlobalState('breadcrumb', breadcrumb)" />
    </div>
    <div class="flex justify-between items-center">
      <span class="text-14px">面包屑图标</span>
      <ElSwitch v-model="breadcrumbIcon" @change="settingStore.setGlobalState('breadcrumbIcon', breadcrumbIcon)" />
    </div>
    <div class="flex justify-between items-center">
      <span class="text-14px">页脚</span>
      <ElSwitch v-model="footer" @change="settingStore.setGlobalState('footer', footer)" />
    </div>
    <div class="flex justify-between items-center">
      <span class="text-14px">标签</span>
      <ElSwitch v-model="showTaps" @change="settingStore.setGlobalState('showTaps', showTaps)" />
    </div>
    <div class="flex justify-between items-center">
      <span class="text-14px">标签图标</span>
      <ElSwitch v-model="tagsViewIcon" @change="settingStore.setGlobalState('tagsViewIcon', tagsViewIcon)" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useSettingStore } from '@/stores'
const settingStore = useSettingStore()
const { breadcrumb, footer, showTaps, tagsViewIcon, breadcrumbIcon } = storeToRefs(settingStore)
</script>
